<template>
	<div style="display: flex;flex-direction: column;" class="otherPage corporateOverview developmentHistory">
		<Header :selected="3"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bgImg? 'background:url('+bgImg+') no-repeat;background-size:cover;':''">
			</div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :checked="3" :bgColor="bgColor">
		</Navigation>
		<div class="content">
			<div class="content_bg">
				<div class="vertical-timeline">
					<div class="timeline-item" v-for="(event, index) in  data.content" :key="index">
						<div class="timeline-dot"></div>
						<div class="timeline-content" :class="index % 2 === 0 ? 'left' : 'right'">
							<div class="contentArea" style="">
								<el-row>
									<el-col :xs="24" :sm="24" :md="24" :lg="24">
										<el-row :class="index % 2 === 0?'leftImgArea':'rightImgArea'">
											<el-col :xs="24" :sm="24" :md="24" :lg="11">
												<div class="date">
													<span :class="index%2 == 0?'triangle-left':'triangle-right'"></span>
													<span class="span">{{event.eventTime}}</span>
												</div>
												<div style="width: 100%;padding:10px;text-align: left;">
													{{ event.content }}
												</div>
											</el-col>
											<el-col :xs="24" :sm="24" :md="24" :lg="13">
												<div style=""><img class="honorImg" :src="event.coverImage" /></div>
											</el-col>
										</el-row>
									</el-col>
								</el-row>
							</div>
						</div>
					</div>
					<div class="timeline-line"></div>
				</div>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../components/common/header/Header.vue'
	import Navigation from '../../components/common/navigation/Navigation.vue'
	import Footer from '../../components/common/footer/Footer.vue'
	import {
		corporateOverviewMenu
	} from '../../utils/menu.js'
	// 导入您需要的模块
	import Swiper from "swiper";
	export default {
		components: {
			Header,
			Navigation,
			Footer
		},
		data() {
			return {
				loading: true,
				bgImg: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				menus: corporateOverviewMenu,
				breadcrumbItems: [{
						label: this.$t('home'),
						to: '/'
					},
					{
						label: this.$t('corporateOverview'),
						to: '/corporateOverview'
					},
					{
						label: this.$t('developmentHistory'),
						to: '/developmentHistory'
					}
				],
				hoverIndex: -1,
				data: {
					content: []
				},
			};
		},
		computed: {},
		created() {},
		mounted() {
			this.initPage();
			this.bindDevelopHistoryPage();
			this.bindBg();
		},
		methods: {
			/**
			 * (1)	获取企业简介-(2)	(2)	获取发展历程
			 */
			bindDevelopHistoryPage() {
				let params = {};
				let that = this;
				that.$request.getDevelopHistoryPage(params).then(res => {
					this.data.content = res.data
					this.loading = false;
				}).catch((error) => {
					console.log(error);
				});

			},
			/**
			 * (1)	获取企业简介顶部背景
			 */
			bindBg() {
				let params = {};
				let that = this;
				that.$request.getDevelopHistoryTopImage(params).then(res => {
					this.bgImg = this.$request.getImgUrl() + res.data.fileUrl
				}).catch((error) => {
					console.log(error);
				});

			},
			formatDate(date, format) {
				// 自定义日期格式化方法
				// 可以使用moment.js或其他日期处理库来进行格式化
			},

			initPage() {

			},
			gotoInfo(id) {
				this.$router.push({
					name: this.$t('developmentHistoryInfo'),
					query: {
						id: id
					}
				});
			}

		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/corporateOverview/companyProfile.css");



	.odd {
		padding: 30px 0;
		cursor: pointer;
		margin-bottom: 5px;

	}

	.odd:hover {
		background-color: #F6F6F6;
	}

	.odd:hover .img {
		transform: scale(1.03)
	}

	.even:hover {
		background-color: #F6F6F6;
	}

	.even:hover .img {
		transform: scale(1.03)
	}

	.odd .date .span {
		float: left;
	}

	.even {
		background-color: #F6F6F6;
		padding: 30px 0;
		cursor: pointer;
		transition: transform 0.3s ease;
		margin-bottom: 5px;
	}

	.developmentHistory .img {
		max-width: 500px;
		width: 100%;
		height: 28vh;
		border-radius: 5px;
		transition: transform 0.3s ease;
		/* 添加过渡效果 */
	}

	.date {
		height: 40px;
		margin: 0 0 15px 0 !important;
		min-width: 180px;
	}

	.date .span {
		background: #0484D7;
		font-size: 22px;
		font-weight: 400;
		color: #FFFFFF;
		height: 40px;
		line-height: 40px;
		text-align: center !important;
	/* 	padding: 0px 8px; */
		display: inline-block;
		width: 150px;
		min-width: 150px;
	
	}

	.developmentHistory .title {
		color: #333333;
		font-size: 26px;
		font-weight: 530;
		overflow: hidden;
		/* 设置超出部分隐藏 */
		text-overflow: ellipsis;
		/* 设置超出部分显示省略号 */
		white-space: nowrap;
		/* 设置文本不换行 */
		margin: 0 0 8px 0 !important;
	}

	.dhcontent {

		overflow: hidden;
		/* 设置超出部分隐藏 */

		font-size: 16px;
		color: #343434;
		font-weight: 400;
		height: 90px;
		line-height: 30px;
		display: inline-block;
		text-overflow: ellipsis;
		/* 设置超出部分显示省略号 */

	}

	.even .title {
		text-align: right;

	}

	.even .date {
		width: 100%;
		background: #F6F6F6;
	}

	.even .date .span {
		float: right;
	}


	.triangle-left {
		width: 0;
		height: 0;
		border-top: 14px solid transparent;
		border-left: 14px solid #0484D7;
		border-bottom: 14px solid transparent;
		float: right;
		margin-top: 6px;
	}

	.triangle-right {
		width: 0;
		height: 0;
		border-top: 14px solid transparent;
		border-right: 14px solid #0484D7;
		border-bottom: 14px solid transparent;
		float: left;
		margin-top: 6px;
	}



	/* ---------------------------------时间线------------------------------------------------ */
	.vertical-timeline {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 将内容居中对齐 */
	}

	.timeline-item {
		display: flex;
		width: 100%;
		margin-bottom: 20px;
		position: relative;
		left: 0px;
		min-width: 300px;
	}

	.timeline-dot {
		width: 12px;
		height: 12px;
		background-color: #0484D7;
		border-radius: 50%;
		position: absolute;
		left: 50%;
		/* 将圆点水平居中 */
		transform: translateX(-50%);
		/* 通过transform将圆点水平居中 */
		z-index: 1;
		top: 5px;
	}

	.timeline-content {
		/* border-radius: 5px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
		z-index: 0;
		width: 50%;
		position: relative;
		text-align: center;
		/* 将内容居中对齐 */
	}

	.timeline-content h3 {
		margin: 0 0 10px;
		font-size: 18px;
	}

	.timeline-content p {
		margin: 0;
		font-size: 14px;
	}

	.timeline-content.left {
		margin-right: auto;
		/* background-color: #f4f4f4; */
		text-align: right;
		/* 将内容左对齐 */
		padding: 20px 20px 20px 0px;
	}

	.timeline-content.right {
		margin-left: auto;
		/* background-color: #f4f4f4; */
		text-align: left;
		/* 将内容左对齐 */
		padding: 20px 0px 20px 20px;
	}

	.timeline-line::after {
		content: '';
		width: 2px;
		height: 100%;
		background-color: #C6C6C6;
		position: absolute;
		left: 50%;
		/* 将时间轴线条水平居中 */
		transform: translateX(-50%);
		/* 通过transform将时间轴线条水平居中 */
		top: 0;
		z-index: 0;
	}

	.honorImg {
		padding: 0px 10px;
		width: calc(1px * (1920 / 1920 * 540 * 0.5));
		height: calc(1px * (1920 / 1920 * 540 * 0.5 * 350 / 540));
	}

	.contentArea {
		width: 100%;
		position: relative;
		top: -30px;
	}

	.leftImgArea {
		display: flex;
		flex-direction: row-reverse;
	}

	.rightImgArea {}

	.content_bg {
		margin: 0px auto;
		padding: 50px;

	}

	@media (min-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}

		.honorImg {
			padding: 0px 10px;
			width: calc(1px * (2560 / 1920 * 540 * 0.5));
			height: calc(1px * (2560 / 1920 * 540 * 0.5 * 350 / 540));
		}

		.leftImgArea {
			flex-direction: row-reverse;
		}

		.rightImgArea {
			display: flex;
			flex-direction: row;
		}
	}

	@media (max-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}

		.honorImg {
			padding: 0px 10px;
			width: calc(1px * (2560 / 1920 * 540 * 0.5));
			height: calc(1px * (2560 / 1920 * 540 * 0.5 * 350 / 540));
		}

		.leftImgArea {
			flex-direction: row-reverse;
		}

		.rightImgArea {
			display: flex;
			flex-direction: row;
		}
	}

	@media (max-width: 2320px) {
		.content_bg {
			width: calc(2320px * 0.8);
		}

		.honorImg {
			padding: 0px 10px;
			width: calc(1px * (2320 / 1920 * 540 * 0.5));
			height: calc(1px * (2320 / 1920 * 540 * 0.5 * 350 / 540));
		}

		.leftImgArea {
			flex-direction: row-reverse;
		}

		.rightImgArea {
			display: flex;
			flex-direction: row;
		}
	}

	@media (max-width: 2120px) {
		.content_bg {
			width: calc(2120px * 0.8);
		}

		.honorImg {
			padding: 0px 10px;
			width: calc(1px * (2120 / 1920 * 540 * 0.5));
			height: calc(1px * (2120 / 1920 * 540 * 0.5 * 350 / 540));
		}

		.leftImgArea {
			flex-direction: row-reverse;
		}

		.rightImgArea {
			display: flex;
			flex-direction: row;
		}
	}

	@media (max-width: 1920px) {
		.content_bg {
			width: calc(1920px * 0.8);
		}

		.honorImg {
			padding: 0px 10px;
			width: calc(1px * (1920 / 1920 * 540 * 0.5));
			height: calc(1px * (1920 / 1920 * 540 * 0.5 * 350 / 540));
		}

		.leftImgArea {
			flex-direction: row-reverse;
		}

		.rightImgArea {
			display: flex;
			flex-direction: row;
		}
	}

	@media (max-width: 1720px) {
		.content_bg {
			width: calc(1720px * 0.8);
		}

		.honorImg {
			padding: 0px 10px;
			width: calc(1px * (1720 / 1920 * 540 * 0.5));
			height: calc(1px * (1720 / 1920 * 540 * 0.5 * 350 / 540));
		}

		.leftImgArea {
			flex-direction: row-reverse;
		}

		.rightImgArea {
			display: flex;
			flex-direction: row;
		}
	}

	@media (max-width: 1520px) {
		.content_bg {
			width: calc(1520px * 0.8);
		}

		.honorImg {
			padding: 0px 10px;
			width: calc(1px * (1520 / 1920 * 540 * 0.5));
			height: calc(1px * (1520 / 1920 * 540 * 0.5 * 350 / 540));
		}

		.leftImgArea {
			flex-direction: row-reverse;
		}

		.rightImgArea {
			display: flex;
			flex-direction: row;
		}
	}

	@media (max-width: 1366px) {
		.content_bg {
			width: calc(1366px * 0.8);
		}

		.honorImg {
			padding: 0px 10px;
			width: calc(1px * (1366 / 1920 * 540 * 0.9));
			height: calc(1px * (1366 / 1920 * 540 * 0.9 * 350 / 540));
		}

		.el-col-lg-13,
		.el-col-lg-11 {
			width: 100% !important;
		}

		.leftImgArea {
			display: flex;
			flex-direction: column;
		}

		.rightImgArea {
			display: flex;
			flex-direction: column;
		}
	}

	@media (max-width: 1120px) {
		.content_bg {
			width: 100%
		}

		.honorImg {
			padding: 0px 10px;
			width: calc(1px * (1120 / 1920 * 540 * 0.9));
			height: calc(1px * (1120 / 1920 * 540 * 0.9 * 350 / 540));
		}

		.el-col-lg-13,
		.el-col-lg-11 {
			width: 100% !important;
		}

		.leftImgArea {
			flex-direction: column;
		}

		.rightImgArea {
			display: flex;
			flex-direction: column;
		}
	}

	@media (max-width: 1024px) {

		/* .corporateOverview .img {
			max-width: 100%;
			width: 100%;
			height: 40vh;
		} */
		.el-col-lg-13,
		.el-col-lg-11 {
			width: 100% !important;
		}

		.honorImg {
			max-width: 290px;
			padding: 0px 10px;
			width: calc(1px * (1024 / 1920 * 540 * 0.9));
			height: calc(1px * (1024 / 1920 * 540 * 0.9 * 350 / 540));
		}

		.leftImgArea {
			flex-direction: column;
		}

		.rightImgArea {
			display: flex;
			flex-direction: column;
		}
	}

	@media (max-width: 900px) {}


	@media (max-width: 768px) {
		.corporateOverview .content {
			min-width: 300px;
		}

		.timeline-dot,
		.timeline-line::after {
			left: 0;
			/* 当窗口宽度小于768px时，将圆点和时间轴线条左对齐 */
			transform: none;
			/* 取消transform */
		}

		.leftImgArea {
			display: flex;
			flex-direction: column;
		}

		.timeline-content.left,
		.timeline-content.right {
			text-align: left;
			/* 当窗口宽度小于768px时，将内容左对齐 */
			margin-left: 30px;
			padding: 0px;
		}

		.contentArea {
			width: 100%;
			position: relative;
			top: -10px;
		}

		.timeline-content {
			width: 100%;
		}

		.triangle-left {
			width: 0;
			height: 0;
			border-top: 11px solid transparent;
			border-left: 0px solid #0484D7;
			border-right: 11px solid #0484D7;
			border-bottom: 11px solid transparent;
			float: left;
			margin-top: 11px;
		}

		.timeline-item {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			width: 100%;
			margin-bottom: 20px;
			position: relative;
			left: -5px;
		}

	}
</style>
